<template>
  <div class="Container">
    <!-- 左侧滑动栏 -->
    <SideBar class="SideBar" ref="sideBar" @OpenTool="showTool"></SideBar>
    <!-- 右侧图片列表栏 -->
    <div class="MainContainer">
      <Library ref="library"></Library>
    </div>
    <!-- 操作弹窗 -->
    <el-drawer
      class="ChangeModel"
      :style="{ minWidth: '588px' }"
      :title="getToolName()"
      v-model="showToolPage"
      direction="ltr"
      :size="getSize()"
      @close="closeDrawer"
      :with-header="false"
    >
      <!--<ChangeModel @startGenerate="generateImg"></ChangeModel>-->
      <ToolWrapper
        @startGenerate="generateImg"
        :ToolType="nowToolType"
        :imageUrl="imageUrl"
        :z-index="2000"
        @ShowFullBar="showFullBar"
        @ChangeType="ChangeType"
      ></ToolWrapper>
    </el-drawer>
  </div>
</template>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
.Container {
  display: flex;
  height: 100%;
  width: 100%;
  //padding: 12px;
  box-sizing: border-box;
  overflow: hidden;
}
.SideBar{
  position: relative;
  z-index: 3000;
}
.MainContainer {
  flex: 1;
  overflow: hidden;
  padding: 12px;
  height: 100%;
}
.editphoto-dialog .el-dialog__header {
  padding-bottom: 0;
}

/* 大屏幕设备 */
// @media screen and (min-width: 1920px) {
// }

// @media screen and (min-width: 1440px) and (max-width: 1919px) {
// }

// @media screen and (min-width: 1280px) and (max-width: 1439px) {
// }

// /* （1024px - 1279px） */
// @media screen and (min-width: 1024px) and (max-width: 1279px) {
//   .el-drawer.rtl {
//     width: calc(80% - 126px) !important;
//   }
// }
</style>

<script>
import SideBar from "../components/layout/side_bar.vue";
import Library from "../components/layout/library.vue";
import Txt2Img from "../components/tool/txt2img.vue";
import ToolWrapper from "../components/layout/tool_wrapper.vue";
import ChangeModel from "../components/tool/change_model.vue";
import EditPhoto from "../components/element/EditPhoto";
import aliScript from '@/unit/alibaba/script.js'
import WebRequest from '@/unit/request.js'
import { ref } from "vue";
export default {
  name: "Home",
  components: {
    SideBar,
    Txt2Img,
    Library,
    ChangeModel,
    ToolWrapper,
    EditPhoto,
  },
  data() {
    return {
      showToolPage: false,
      showFull: [],
      nowToolType: -1,
      imageUrl: "",
    }
  },
  created() {
  },
  methods: {
    refreshTest() {
      this.$refs.library.refresh();
    },
    generateImg() {
      //this.showTxt2Img = false
      //this.showChangeModel = false
      this.$refs.library.refresh();
    },
    showTool(toolType) {
      this.nowToolType = toolType;
      //this.showFull = false
      this.showToolPage = true;
    },
    showFullBar(toolTypeNum) {
      console.log(toolTypeNum);
      if (this.showFull.indexOf(toolTypeNum < 0)) {
        this.showFull.push(toolTypeNum);
        // console.log(this.showFull);
        // console.log(this.showFull.indexOf(this.nowToolType));
      }
    },
    getSize() {
      let scale = this.showFull != null && this.showFull.indexOf(this.nowToolType) >= 0 ? 1 : 0.5
      // 不点击生成图片导致判断成功，尺寸减半，临时注释
      // if (this.nowToolType == 11) {
      //   return `calc((100% + 152px) * ${scale})`
      // }
      /*
      if (this.nowToolType == 11) {
        return `calc((80% + 152px)`
      }
      return `calc((100% - 252px) * ${scale})`
      */
     return this.showFull != null && this.showFull.indexOf(this.nowToolType) >= 0? "90%":"588px" 
    },
    getToolName() {
      switch (this.nowToolType) {
        case 12:
          return "文生图";
          break;

        case 6:
          return "智能二创";
          break;

        case 4:
          return "抠图";
          break;

        case 5:
          return "高清还原";
          break;

        case 3:
          return "素材换脸";
          break;

        case 10:
          return "换背景";
          break;

        case 11:
          return "工作台";
          break;

        case 1001:
          return "模特换装";
          break;

        default:
          return "";
          break;
      }
    },
    // 改变当前模块类型，进行二次编辑
    ChangeType(data) {
      let type = data.type;
      let imageUrl = data.imageUrl;
      if (imageUrl && imageUrl !== "") {
        this.imageUrl = imageUrl;
      }
      this.showTool(type);
    },
    // 关闭弹窗
    closeDrawer() {
      this.nowToolType = -1;
      this.showToolPage = false;
      this.imageUrl = "";
    },

  },
};
</script>
